<ng-form name="keyValueMapForm">
  <fieldset>
    <!-- Name -->
    <div ng-show="showNameInput" class="form-group">
      <label for="key-value-map-name" class="required">Name</label>
      <!-- regex, maxlength from k8s.io/kubernetes/pkg/util/validation/validation.go -->
      <div ng-class="{ 'has-error': keyValueMapForm.name.$invalid && keyValueMapForm.name.$touched }">
        <input
            id="key-value-map-name"
            class="form-control"
            type="text"
            name="name"
            ng-model="map.metadata.name"
            ng-required="showNameInput"
            ng-pattern="nameValidation.pattern"
            ng-maxlength="nameValidation.maxlength"
            placeholder="my-{{type}}"
            select-on-focus
            autocorrect="off"
            autocapitalize="none"
            spellcheck="false"
            aria-describedby="key-value-map-name-help">
      </div>
      <div>
        <span id="key-value-map-name-help" class="help-block">A unique name for the {{type}} within the project.</span>
      </div>
      <div class="has-error" ng-show="keyValueMapForm.name.$error.pattern && keyValueMapForm.name.$touched">
        <span class="help-block">
          {{nameValidation.description}}
        </span>
      </div>
      <div class="has-error" ng-show="keyValueMapForm.name.$error.required && keyValueMapForm.name.$touched">
        <span class="help-block">
          Name is required.
        </span>
      </div>
      <div class="has-error" ng-show="keyValueMapForm.name.$error.maxlength">
        <span class="help-block">
          Can't be longer than {{nameValidation.maxlength}} characters.
        </span>
      </div>
    </div>

    <div ng-if="!data.length">
      <p><em>The {{type}} has no items.</em></p>
      <a href="" ng-click="addItem()">Add Item</a>
    </div>

    <div ng-repeat="item in data" ng-init="keys = getKeys()">
      <div class="form-group">
        <label ng-attr-for="key-{{$id}}" class="required">Key</label>
        <!--
          Config map validation:
          https://github.com/openshift/origin/blob/32708e768d77db08b118d084955a7ccf2aebbf1c/vendor/k8s.io/client-go/1.4/pkg/util/validation/validation.go#L271-L273
        -->
        <div ng-class="{ 'has-error': keyValueMapForm['key-' + $id].$invalid && keyValueMapForm['key-' + $id].$touched }">
          <input
              class="form-control"
              name="key-{{$id}}"
              ng-attr-id="key-{{$id}}"
              type="text"
              ng-model="item.key"
              required
              ng-pattern="/^[-._a-zA-Z0-9]+$/"
              ng-maxlength="253"
              osc-unique="keys"
              placeholder="my.key"
              select-on-focus
              autocorrect="off"
              autocapitalize="none"
              spellcheck="false"
              aria-describedby="key-{{$id}}-help">
        </div>
        <div class="help-block">
          A unique key for this {{type}} entry.
        </div>
        <div class="has-error" ng-show="keyValueMapForm['key-' + $id].$error.required && keyValueMapForm['key-' + $id].$touched">
          <span class="help-block">
            Key is required.
          </span>
        </div>
        <div class="has-error" ng-show="keyValueMapForm['key-' + $id].$error.oscUnique && keyValueMapForm['key-' + $id].$touched && item.key">
          <span class="help-block">
            Duplicate key "{{item.key}}". Keys must be unique within the {{type}}.
          </span>
        </div>
        <div class="has-error" ng-show="keyValueMapForm['key-' + $id].$error.pattern && keyValueMapForm['key-' + $id].$touched">
          <span class="help-block">
            Keys may only consist of letters, numbers, periods, hyphens, and underscores.
          </span>
        </div>
        <div class="has-error" ng-show="keyValueMapForm['key-' + $id].$error.maxlength">
          <span class="help-block">
            Keys may not be longer than 253 characters.
          </span>
        </div>
      </div>
      <div class="form-group" ng-attr-id="drop-zone-{{$id}}">
        <label ng-attr-for="name-{{$id}}">Value</label>
        <div ng-if="isBinaryFile" class="h4">
          This file contains binary content.
        </div>
        <osc-file-input
          model="item.value"
          drop-zone-id="drop-zone-{{$id}}"
          help-text="Enter a value for the {{type}} entry or use the contents of a file."
          read-as-binary-string="readAsBinaryString"
          is-binary-file="isBinaryFile"></osc-file-input>
        <div ui-ace="{
          theme: 'eclipse',
          rendererOptions: {
            showPrintMargin: false
          }
        }" ng-model="item.value" ng-if="!isBinaryFile" class="ace-bordered ace-inline-small mar-top-sm" ng-attr-id="value-{{$id}}"></div>
      </div>
      <div class="mar-bottom-md">
        <a href="" ng-click="removeItem($index)">Remove Item</a>
        <span ng-if="$last">
          <span class="action-divider">|</span>
          <a href="" ng-click="addItem()">Add Item</a>
        </span>
      </div>
    </div>
    <div>
    </div>
  </fieldset>
</ng-form>
